<template>
  <view class="container">
    <statusBar></statusBar>
    <!-- 返回栏 -->
		<view class="go-back">
			<image src="../../static/go-back.svg" @click="goBack"/>
			<uni-easyinput 
        prefixIcon="search" 
        v-model="searchVal" 
        placeholder="请输入内容" 
        @iconClick="toSearch"
      ></uni-easyinput>
			<text @click="toSearch">搜索</text>
		</view>

    <!-- 历史搜索 猜你想猜 -->
    <view class="history">
      <view class="title-layout" v-if="dataList.historySearch.length > 0">
        <view>历史搜索</view>
        <view>
          <image src="../../static/del.svg" @click="empty"></image>
        </view>
      </view>
  
      <view class="label-layout history-search" v-if="dataList.historySearchShow.length > 0">
        <text 
          class="label" 
          v-for="item in dataList.historySearchShow" 
          :key="item"
          @click="changeHistory(item)"
        >{{item}}</text>
        <!-- 展开 -->
        <!-- <view class="process-more"> -->
        <image src="../../static/down.svg" alt="" v-if="dataList.historySearch.length > 10 && !isUnfold" @click="unfold"></image>
        <!-- </view> -->
        <!-- 收回 -->
        <image v-if="isUnfold" src="../../static/top.svg" alt="" @click="takeBack"></image>
      </view>
      
      <!-- 猜你想搜 -->
      <view class="title-layout">
        <view>猜你想搜</view>
        <image src="../../static/refresh.svg" @click="refresh"></image>
      </view>
  
      <view class="label-layout">
        <view class="label" v-for="item in dataList.topSearch" :key="item.content" @click="changeGuess(item.content)">{{item.content}}</view>
        <!-- <view class="label" v-for="item in dataList.topSearch" :key="item.content">{{item.content}}</view> -->
      </view>
    </view>

    <!-- 今日热搜 -->
    <view class="top-search">
      <view class="title">
        <image v-if="!changeTitle" src="../../static/top-search.svg" @click="handleTitle(0)"/>
        <image v-if="changeTitle" src="../../static/top-search-nochange.svg" @click="handleTitle(0)"/>
        <image v-if="changeTitle" src="../../static/brand-search.svg" @click="handleTitle(1)"/>
        <image v-if="!changeTitle" src="../../static/brand-search-nochange.svg" @click="handleTitle(1)"/>
      </view>
      <view class="search-content">
        <view class="item" @click="changeGuess('Louis Vuitton夏季最新款包包')">
          <image src="../../static/one.svg"></image>
          <text>Louis Vuitton夏季最新款包包</text>
        </view>
        <view class="item">
          <image src="../../static/two.svg"></image>
          <text>「🍃绿野仙踪*耐克SB」联名计划曝光</text>
        </view>
        <view class="item">
          <image src="../../static/three.svg"></image>
          <text>爱马仕经典首饰排名</text>
        </view>
        <view class="item">
          <view class="number">4</view>
          <text>浪琴手表代言人宣布为赵丽颖</text>
        </view>
        <view class="item">
          <view class="number">4</view>
          <text>浪琴手表代言人宣布为赵丽颖</text>
        </view>
      </view>
    </view>

    <!-- 删除历史搜索弹窗 -->
		<uni-popup ref="delPopupRef" type="center">
			<view class="hint">
        <view class="con">清空历史记录？</view>
        <view class="btn">
          <text @click="() => delPopupRef.close()">取消</text>
          <text @click="delConfirm">确认</text>
        </view>
      </view>
		</uni-popup>
    <!-- <uni-popup ref="delPopupRef" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup> -->
    
  </view>
</template>

<script setup>
	import { ref, watch, reactive, onMounted, nextTick } from 'vue';  
  import { onLoad, onShow } from "@dcloudio/uni-app";	
  import { topSearch } from '@/api/search.js';

  const delPopupRef = ref(null)
  const searchVal = ref('')
  const isUnfold = ref(false) //是否展开历史搜索
  const changeTitle = ref(0)  //0 今日热搜    1 品牌热搜
  const dataList = reactive({
    historySearch:[], //历史搜索总数据
    historySearchShow:[],  //显示的历史所搜数据
    topSearch:[]
  })

  onShow(() => {
    searchVal.value = ''
    getHistory()
  })

  onMounted(() => {
    // getHistory()
    getTopSearch()
  })


  const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}


  //获取历史搜索
  const getHistory = () => {
    dataList.historySearch = uni.getStorageSync('HistoryList') || []
    dataList.historySearch = Array.from(new Set(dataList.historySearch))
    dataList.historySearchShow = dataList.historySearch.length > 10 ? dataList.historySearch.slice(0,10) : dataList.historySearch
  }

  //猜你想搜
  const getTopSearch = async () => {
    let res = await topSearch()
    console.log('res',res)
    dataList.topSearch = res
  }

  //切换title
  const handleTitle = (v) => {
    changeTitle.value = v
  }

  //清空历史搜素
  const empty = () => {
    delPopupRef.value.open()
  }

  //确认清空
  const delConfirm = async () => {
    wx.setStorageSync('HistoryList', [])
    getHistory()
    delPopupRef.value.close()
  }

  //刷新
  const refresh = () => {
    getTopSearch()
  }

  //点击历史搜索
  const changeHistory = (item) => {
    uni.navigateTo({
      url:  `/pages/searchResult/index?searchV=${item}`
    })
  }

  //点击猜你想搜
  const changeGuess = (item) => {
    let arr = wx.getStorageSync('HistoryList') || []
    arr.push(item)
    wx.setStorageSync('HistoryList', arr)
    uni.navigateTo({
      url:  `/pages/searchResult/index?searchV=${item}`
    })
  }

  //搜索
  const toSearch = () => {
    if(!searchVal.value){
      uni.showToast({
        title: '请输入内容',
        duration: 2000,
        icon:'none'
      });
      return;
    }
    let arr = wx.getStorageSync('HistoryList') || []
    arr.push(searchVal.value)
    wx.setStorageSync('HistoryList', arr)
    uni.navigateTo({
      url:  `/pages/searchResult/index?searchV=${searchVal.value}`
    })
  }

  //展开历史搜索
  const unfold = () => {
    dataList.historySearchShow = dataList.historySearch
    isUnfold.value = true
  }

  //收回
  const takeBack = () => {
    dataList.historySearchShow = dataList.historySearch.slice(0,8)
    isUnfold.value = false
  }

</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;

		.go-back{
			width: 750rpx;
			height: 88rpx;
			padding:0 30rpx;
			box-sizing: border-box;
			@include flex(row,space-between,center);
		  
      image{
				width: 40rpx;
				height: 40rpx;
        margin-right: 30rpx;
			}

      ::v-deep .uni-easyinput{
        width: 530rpx !important;
        height: 64rpx;
      }
			
      ::v-deep .uni-easyinput__content{
        width: 530rpx !important;
        height: 64rpx !important;
        background: #F4F3F7 !important;
        border-radius: 32rpx !important;
        backdrop-filter: blur(5px) !important;
      }
      ::v-deep .is-input-border{
        border: none !important;
      }

      ::v-deep .uni-icons{
        color: #D8D8D8 !important;
        font-size: 20px !important;
      }

      text{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        margin-left: 30rpx;
      }
		}

    .history{
      width: 750rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      margin-top: 28rpx;

      .title-layout{
        margin-bottom: 30rpx;
        @include flex(row,space-between);

        view:nth-of-type(1){
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #333333;
        } 
        
        image{
          width: 30rpx;
          height: 30rpx;
        }
      }
      .label-layout{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16rpx;

        .label{
          height: 56rpx;
          background: #F4F3F7;
          border-radius: 35rpx;
          backdrop-filter: blur(5px);
          padding: 0 14rpx;
          margin:0 24rpx 24rpx 0;
          line-height: 56rpx;
          position: relative;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #5D5C60;
          @include flex(row,center,center);

          >image{
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            right: 0rpx;
            top: -16rpx
          }
        }
        image{
          width: 56rpx;
          height: 56rpx;
        }
      }
      
    }

    .top-search{
      width: 750rpx;
      padding: 0 36rpx 0 24rpx;
      box-sizing: border-box;

      .title{
        margin-bottom: 28rpx;

        image{
          width: 112rpx;
          height: 28rpx;
          margin-right: 44rpx;
        }

      }

      .search-content{
        .item{
          width: 100%;
          height: 64rpx;
          background: linear-gradient( 99deg, #F4F3F7 0%, #FFFFFF 100%);
          border-radius: 8rpx;
          margin-bottom: 24rpx;
          @include flex(row,flex-start);

          image{
            width: 44rpx;
            height: 44rpx;
            margin-left: 20rpx;
            margin-right: 20rpx;
          }

          .number{
            width: 44rpx;
            height: 44rpx;
            margin-left: 20rpx;
            margin-right: 20rpx;
            font-family: LiterataTT, LiterataTT;
            font-weight: normal;
            font-size: 26rpx;
            color: #807D7B;
            line-height: 44rpx;
            text-align: center;
          }

          text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
          }
        }
        .item:nth-of-type(1){
          background-image: url('../../static/bg.svg');
          background-size: cover;
          background-repeat: no-repeat;
        }
        .item:nth-of-type(2){
          background: linear-gradient( 99deg, #FFF4F3 0%, #FFFCF8 87%, #FFFFFF 100%);
        }
        .item:nth-of-type(3){
          background: linear-gradient( 99deg, #FFF4F3 0%, #FFFCF8 87%, #FFFFFF 100%);
        }
      }
    }

    .hint{
      width: 596rpx;
      height: 252rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 52rpx 48rpx 38rpx 48rpx;
      box-sizing: border-box;
      
      >.con{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 90rpx;
      }
      >.btn{
        @include flex(row,flex-end);

        text{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #25C7B7;
          margin-left: 60rpx;
        }
      }
    }
  }
</style>